<template>
	<view style="padding-top: 400rpx; background-color: #a0bcdc;">
		<view style="display: flex;">
      <c-lottie
      	ref="cLottieRef"
      	:src='src'
      	@LoopComplete="onLoopComplete" 
      	width="500rpx" height='500rpx' :loop="true"></c-lottie>
        <!-- <c-lottie
        	ref="cLottieRef1"
        	:src='src'
        	@LoopComplete="onLoopComplete" 
        	width="260rpx" height='300rpx' :loop="true"></c-lottie> -->
    </view>
		<view class="content">
			<view>切换图像</view>
			<view class="btnBox">
				<button @click="src='https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/7b538fb7-d2d5-4524-bf21-6c20e3b5ce6f.json'" size="mini">热销</button>
				<button @click="src='https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/c42b5f05-06b9-43e7-8436-c1029eee610a.json'" size="mini">字母</button>
			</view>
			<view>播放暂停</view>
			<view class="btnBox">
				<button @click="this.$refs.cLottieRef.call('play')" size="mini">播放</button>
				<button @click="this.$refs.cLottieRef.call('setDirection',-1)" size="mini">反向播放</button>
				<button @click="this.$refs.cLottieRef.call('pause')" size="mini">暂停播放</button>
				<button @click="this.$refs.cLottieRef.call('stop')" size="mini">停止播放</button>
			</view>
			<view>播放速度</view>
			<view class="btnBox">
				<button @click="this.$refs.cLottieRef.call('setSpeed',1)" size="mini">播放速度1x</button>
				<button @click="this.$refs.cLottieRef.call('setSpeed',2)" size="mini">播放速度2x</button>
			</view>
			<view>播放其它设置</view>
			<view class="btnBox">
				<button @click="this.$refs.cLottieRef.call('goToAndStop',[2000,false])" size="mini">跳转到2s并暂停</button>
				<button @click="this.$refs.cLottieRef.call('goToAndPlay',[2000,false])" size="mini">跳转到2s并播放</button>
			</view>
			<view class="btnBox">
				<button @click="this.$refs.cLottieRef.call('goToAndStop',[2,true])" size="mini">跳转到第2帧并暂停</button>
				<button @click="this.$refs.cLottieRef.call('goToAndPlay',[2,true])" size="mini">跳转到第2帧并播放</button>
			</view>
			<view class="btnBox">
				<button @click="this.$refs.cLottieRef.call('playSegments',[[10,20],false])" size="mini">播放完之前的片段，播放10-20帧</button>
			</view>
			<view class="btnBox">
				<button @click="this.$refs.cLottieRef.call('playSegments',[[[0,5],[10,18]],true])" size="mini">直接播放0-5帧和10-18帧</button>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// src: 'https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/7b538fb7-d2d5-4524-bf21-6c20e3b5ce6f.json'
				src: 'https://webstatic.feifanxinli.com/talkTimeUserClient/animation/j1tD6Tkz7X.json'
			}
		},
		methods: {
			onLoopComplete(val) {
				// console.log('当前循环播放完成',val);
			}
		},
	}
</script>

<style lang="scss">
	.page{
		width: 100vw;
		overflow-x: hidden;
	}
	.content{
		padding: 20rpx;
		font-size: 28rpx;
	}
	.btnBox{
		width: 100%;
		display: flex;align-items: center;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}
</style>